import { ref } from 'vue'
import { theme } from 'ant-design-vue'
const { defaultAlgorithm, darkAlgorithm } = theme
interface CustomTheme {
    name: string
    label: string
    isDark?: boolean
    token: any
}
export const THEME = ref<CustomTheme>({
    name: 'default',
    label: '默认蓝',
    isDark: false,
    token: {
        colorPrimary: '#1677ff' // AntD 默认主色
    }
})

export const primaryColor = computed(() => {
    return THEME.value.token.colorPrimary
})

// 生成 AntD 所需的 theme 对象
export const antdTheme = computed(() => {
    return {
        algorithm: THEME.value.isDark ? darkAlgorithm : defaultAlgorithm,
        token: THEME.value.token
    }
})

export const subTextColor = computed(() =>
    THEME.value.isDark ? '#a8a29e' : '#a29d9a'
)

export const bgColor = computed(() =>
    THEME.value.isDark ? '#000' : '#fff'
)

export const textColor = computed(() =>
    THEME.value.isDark ? '#f4f4f5' : '#141414'
)
export const textPrimaryColor = computed(() =>
    THEME.value.token.colorPrimary
)

export const gbgColor = computed(() =>
    THEME.value.isDark ? '#292524' : '#f5f5f4'
)